<template>
  <Table
      ref="table"
      :size="size"
      :columns="finalColumn"
      :data="data"
      :stripe="true"
      :loading="loading"
      :max-height="tableHeight"
      :highlight-row="config.highlightRow"
      :row-class-name="rowClassName"
      :style="styleVar"
      @on-row-click="(row,index)=>$emit('handleClick',row,index)"
      @on-row-dblclick="(row,index)=>$emit('handleDbClick',row,index)"
      @on-sort-change="(column,key,order)=>$emit('handleSortChange',column,key,order)"
      @on-select="(selection,row)=>$emit('handleSelect',selection,row)"
      @on-select-cancel="(selection,row)=>$emit('handleSelectCancel',selection,row)"
      @on-select-all="(selection)=>$emit('handleSelectAll',selection)"
      @on-select-all-cancel="(selection)=>$emit('handleClearSelect',selection)">
    <template v-if="config.additionalAction" slot-scope="{ row,index }" slot="additionalAction">
      <!-- 非pda -->
      <div @click.stop.prevent v-if="!G_IsMobile">
        <template v-for="(item,i) in additionalAction.buttons">
          <a :style="{color:item.color}" type="text" @click="item.event(data[index],index)" v-if="btnShowFun(row,item.key)">{{ item.title }}</a>
          <Divider v-if="i<additionalAction.buttons.length-1 && btnShowFun(row,item.key)" type="vertical"/>
        </template>
      </div>
      <!-- 兼容pda -->
      <Dropdown trigger="click" v-if="G_IsMobile" transfer>
        <a type="text">
            {{lang.more}}
            <Icon type="ios-arrow-down"></Icon>
        </a>
        <template #list>
            <DropdownMenu v-for="(item,i) in additionalAction.buttons" :key="item.key">
                <Button :style="{color:item.color}" type="text" @click="item.event(data[index],index)" v-if="btnShowFun(row,item.key)">{{ item.title }}</Button>
            </DropdownMenu>
        </template>
      </Dropdown>
    </template>
    <template v-if="config.action" slot-scope="{ row,index }" slot="action">
      <!-- 非pda -->
      <div @click.stop.prevent v-if="!G_IsMobile">
        <template v-if="action.edit">
            <a type="text" @click="$emit('handleEdit',data[index],index)">{{ lang.edit }}</a>
            <Divider type="vertical"/>
        </template>
        <template v-if="action.delete">
            <a type="text" @click="$emit('handleDelete',data[index],index)">{{ lang.delete }}</a>
            <Divider type="vertical"/>
        </template>
        <a type="text" @click="$emit('handleDetail',data[index],index)" v-if="action.detail">{{ lang.detail }}</a>
      </div>
      <!-- 兼容pda -->
      <Dropdown trigger="click" v-if="G_IsMobile" transfer>
        <a type="text">
            {{lang.more}}
            <Icon type="ios-arrow-down"></Icon>
        </a>
        <template #list>
            <DropdownMenu>
                <DropdownItem v-if="action.edit">
                    <a type="text" @click="$emit('handleEdit',data[index],index)">{{ lang.edit }}</a>
                </DropdownItem>
                <DropdownItem v-if="action.delete">
                    <a type="text" @click="$emit('handleDelete',data[index],index)">{{ lang.delete }}</a>
                </DropdownItem>
                <DropdownItem v-if="action.detail">
                    <a type="text" @click="$emit('handleDetail',data[index],index)">{{ lang.detail }}</a>
                </DropdownItem>
            </DropdownMenu>
        </template>
      </Dropdown>
    </template>
  </Table>
</template>

<script>
    export default {
        name: 'table-expand-basic',
        data () {
            return {
                finalColumn: [],
                tableHeight:window.innerHeight - 400
            }
        },
        props: {
            config: {
                default: () => {
                    return {
                        action: true,
                        additionalAction: true,
                        showCheck: true,
                    }
                }
            },
            action: {
                default: () => {
                    return {
                        edit: true,
                        delete: true,
                        detail: true
                    }
                }
            },
            loading: {
                default: () => {
                    return false
                }
            },
            data: {
                default: () => {
                    return []
                }
            },
            size: {
                default: () => {
                    return 'default'
                }
            },
            columns: {
                default: () => {
                    return []
                }
            },
            additionalAction: {
                default: () => {
                    return []
                }
            },
            btnShowFun:{
              default:()=>{
                return function(){
                  return true
                }
              }
            },
            rowbgc:{
                default:()=>{
                    return 'red'
                }
            }
        },
        computed: {
            lang () {
                return {
                    'en-US': {
                        edit: 'edit',
                        delete: 'delete',
                        detail: 'detail',
                        action: 'action',
                        more: 'more',
                    },
                    'zh-CN': {
                        edit: '编辑',
                        delete: '删除',
                        detail: '查看',
                        action: '操作',
                        more: '更多',
                    }
                }[this.G_Locale]
            },
            checkColumn () {
                return {
                    type: 'selection',
                    width: 50,
                    align: 'center',
                    field: 'left',
                    show: true
                }
            },
            actionColumn () {
                let actionColumn = {
                    key: 'action',
                    title: this.lang.action,
                    slot: 'action',
                    width: 200,
                    fixed: 'right',
                    align: 'center',
                    show: true
                }
                this.G_IsMobile && (actionColumn.width = 90)
                return actionColumn
            },
            styleVar() {
                return {
                    '--bgc': this.rowbgc
                }
            }
        },
        mounted () {
            this.finalColumn = this.getFinalColumn();
        },
        watch: {
            'columns': {
                handler: function () {
                    this.finalColumn = this.getFinalColumn();
                },
                deep: true
            }
        },
        methods: {
            getFinalColumn () {
                let col = [...this.columns.filter(item => item.show)];
                if (this.config.showCheck===undefined||this.config.showCheck) {
                    col.unshift(this.checkColumn)
                }
                if (this.config.additionalAction) {
                    col.push(this.additionalAction)
                }
                if (this.config.action) {
                    col.push(this.actionColumn)
                };
                return col;
            },
            download () {
                this.G_Download(this.$refs.table, 'The original data', this.columns.filter(item => item.show === true), this.data)
            },
            export () {
                this.G_Export('The original data', this.columns.filter(item => item.show === true), this.data)
            },
            /**
             * 解决列设置中显隐字段不好使
             */
            setFinalColumn(){
                this.finalColumn = this.getFinalColumn()
            },
            /**
             * 自定义背景样式
             */
            rowClassName(row, index) {
                if(row['needColor']) {
                    return 'color-table-info-row'
                } else {
                    return ''
                }
            }   
        }
    }
</script>

<style lang="less" scoped>
::v-deep .ivu-table .color-table-info-row td{
    background-color: var(--bgc) !important;
    color: #fff;
    a {
      color: #fff;
    }
}
::v-deep .ivu-table .color-table-info-row.ivu-table-row-hover td{
    background-color: var(--bgc);
    color: #fff;
    a {
      color: #fff;
    }
}
</style>
